<template>
    <div class="login-container">
        <div class="login">
            <div class="login-head">
                <span>帐号登录</span>
            </div>
            <el-form
                :model="loginForm"
                ref="loginForm"
                label-width="70px"
                class="demo-ruleForm"
                :rules="rules"
            >
                <el-form-item prop="username" label="邮箱">
                    <el-input
                        v-model="loginForm.email"
                        placeholder="邮箱"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="password" label="密码">
                    <el-input
                        type="password"
                        v-model="loginForm.password"
                        placeholder="密码"
                    ></el-input>
                </el-form-item>

                <div class="login-btn">
                    <el-button @click="goSignUp">注册</el-button>
                    <el-button type="primary" @click="handleLoginIn"
                        >登录</el-button
                    >
                </div>
            </el-form>
        </div>
    </div>
</template>
<script>
import loginLogo from "../components/LoginLogo";
import { mixin } from "@/mixins";
import { loginIn, getUserInfo } from "../api/index";

export default {
    name: "login-in",
    mixins: [mixin],
    components: {
        loginLogo,
    },
    data() {
        return {
            loginForm: {
                email: "", // 邮箱
                password: "", // 密码
            },
            rules: {
                email: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请输入邮箱",
                    },
                ],
                password: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请输入密码",
                    },
                ],
            },
        };
    },
    mounted() {
        this.changeIndex("登录");
    },
    methods: {
        getUserInfo() {
            let _this = this;
            getUserInfo()
                .then((res) => {
                    console.log(res);
                    if (res.code === 1) {
                        // 设置状态为已登录
                        _this.$store.commit("setLoginIn", true);
                        _this.$store.commit("setUserId", res.data.id);
                        _this.$store.commit("setUsername", res.data.name);
                        _this.$store.commit("setAvator", res.data.avatar);
                        setTimeout(function () {
                            _this.changeIndex("首页");
                            _this.$router.push({ path: "/" });
                        }, 2000);
                    } else {
                        _this.notify("获取用户信息失败", "error");
                    }
                })
                .catch((err) => {
                    _this.notify("获取用户信息失败", "error");
                });
        },
        handleLoginIn() {
            let _this = this;
            loginIn(this.loginForm)
                .then((res) => {
                    console.log(res);
                    if (res.code === 1) {
                        _this.notify("登录成功", "success");
                        // 将token存入到LocalStorage
                        localStorage.setItem(
                            "accessToken",
                            res.data.accessToken,
                        );
                        this.getUserInfo();
                    } else {
                        _this.notify("用户名或密码错误", "error");
                    }
                })
                .catch((err) => {
                    _this.notify("用户名或密码错误", "error");
                });
        },
        goSignUp() {
            this.changeIndex("注册");
            this.$router.push({ path: "/sign-up" });
        },
        changeIndex(value) {
            this.$store.commit("setActiveName", value);
        },
    },
};
</script>

<style lang="scss" scoped>
@use "../assets/css/login-in.scss";
</style>
